import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'

export default class LinearGradientDemo extends Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center'}}>
        <LinearGradient 
          colors={['#4c669f', '#3b5998', '#192f6a']}
          style={styles.linearGradient}
        >
          <Text style={styles.buttonText}> 垂直渐变 </Text>
        </LinearGradient>
        <LinearGradient 
          start={{x: 0, y: 0}} 
          end={{x: 1, y: 0}} 
          colors={['#4c669f', '#3b5998', '#192f6a']} 
          style={styles.linearGradient}
        >
          <Text style={styles.buttonText}>
            水平渐变
          </Text>
        </LinearGradient>

        <LinearGradient
          start={{x: 0.0, y: 0.2}} 
          end={{x: 0.15, y: 1.2}}
          locations={[0,0.5,0.7]}
          colors={['#4c669f', '#3b5998', '#192f6a']}
          style={styles.linearGradient}
        >
          <Text style={styles.buttonText}>
            倾斜渐变
          </Text>
        </LinearGradient>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    borderRadius: 55,
    margin: 10,
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 30,
    textAlign: 'center',
    color: '#fff',
  },
})
